<template>
  <div class="content-container">
    <!-- 顶部操作栏 -->
    <div class="top-bar">
      <div class="left-section">
        <button class="btn primary" @click="showModal = true">导入文档</button>
        <button class="btn primary" @click="createNewLesson">新建教案</button>
      </div>
      <div class="right-section">
        <button class="btn secondary" @click="deleteSelected">删除</button>
      </div>
    </div>

    <!-- 搜索过滤区域 -->
    <div class="section filter">
      <div class="filter-item">
        <span>搜索名称</span>
        <input type="text" placeholder="请输入..." v-model="searchQuery" @input="applyFilters">
      </div>
      <div class="filter-item">
        <span>更新时间</span>
        <select v-model="sortBy" @change="applyFilters">
          <option value="date-desc">最新优先</option>
          <option value="date-asc">最旧优先</option>
        </select>
      </div>
      <div class="filter-item">
        <span>文件大小</span>
        <select v-model="sizeFilter" @change="applyFilters">
          <option value="all">全部</option>
          <option value="small">小于100KB</option>
          <option value="medium">100-200KB</option>
          <option value="large">大于200KB</option>
        </select>
      </div>
      <div class="filter-item">
        <button class="btn query" @click="applyFilters">查询</button>
      </div>
    </div>

    <!-- 主文件列表区域 - 增加选项卡 -->
    <div class="section file-list">
      <div class="tabs" style="margin-bottom:20px">
        <div
          class="tab"
          :class="{ active: activeMainTab === 'courseware' }"
          @click="activeMainTab = 'courseware'"
        >
          课件
        </div>
        <div
          class="tab"
          :class="{ active: activeMainTab === 'lesson' }"
          @click="activeMainTab = 'lesson'"
        >
          教案
        </div>
      </div>

      <!-- 课件表格 -->
      <div v-if="activeMainTab === 'courseware'">
        <h3 class="file-table-title">课件列表</h3>
        <div class="file-table">
          <div class="table-header">
            <div class="header-item" style="width: 50px;"></div>
            <div class="header-item" style="flex: 2;">课件名称</div>
            <div class="header-item" style="flex: 1.5;">更新时间</div>
            <div class="header-item" style="flex: 1;">文件大小</div>
            <div class="header-item" style="flex: 1.5;">操作</div>
          </div>

          <div class="table-row" v-for="file in filteredCourseware" :key="file.id">
            <div class="row-item" style="width: 50px;">
              <input type="checkbox" v-model="selectedFiles" :value="file.id">
            </div>
            <div class="row-item" style="flex: 2;">{{ file.name }}</div>
            <div class="row-item" style="flex: 1.5;">{{ file.date }}</div>
            <div class="row-item" style="flex: 1;">{{ file.size }}</div>
            <div class="row-item" style="flex: 1.5; justify-content: center;">
              <button class="btn share" @click="toggleShare(file)">{{ file.shared ? '取消共享' : '共享文件' }}</button>
              <button class="btn delete" @click="deleteFile(file.id, 'courseware')">删除</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 教案表格 -->
      <div v-if="activeMainTab === 'lesson'">
        <h3 class="file-table-title">教案列表</h3>
        <div class="file-table">
          <div class="table-header">
            <div class="header-item" style="width: 50px;"></div>
            <div class="header-item" style="flex: 2;">教案名称</div>
            <div class="header-item" style="flex: 1.5;">更新时间</div>
            <div class="header-item" style="flex: 1;">文件大小</div>
            <div class="header-item" style="flex: 1.5;">操作</div>
          </div>

          <div class="table-row" v-for="file in filteredLesson" :key="file.id">
            <div class="row-item" style="width: 50px;">
              <input type="checkbox" v-model="selectedFiles" :value="file.id">
            </div>
            <div class="row-item" style="flex: 2;">{{ file.name }}</div>
            <div class="row-item" style="flex: 1.5;">{{ file.date }}</div>
            <div class="row-item" style="flex: 1;">{{ file.size }}</div>
            <div class="row-item" style="flex: 1.5; justify-content: center;">
              <button class="btn share" @click="toggleShare(file)">{{ file.shared ? '取消共享' : '共享文件' }}</button>
              <button class="btn delete" @click="deleteFile(file.id, 'lesson')">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 文件操作统计 -->
    <div class="stats">
      <p>课件: {{ filteredCourseware.length }} 个 | 教案: {{ filteredLesson.length }} 个 | 已选择 {{ selectedFiles.length }} 个文件</p>
    </div>

    <!-- 导入文档弹窗 -->
    <div class="modal" v-if="showModal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>导入文档</h2>
          <span class="close" @click="showModal = false">&times;</span>
        </div>

        <div class="modal-body">
          <div class="import-section">
            <h3>选择导入类型</h3>
            <div class="tabs">
              <div
                class="tab"
                :class="{ active: activeTab === 'courseware' }"
                @click="activeTab = 'courseware'"
              >
                课件
              </div>
              <div
                class="tab"
                :class="{ active: activeTab === 'lesson' }"
                @click="activeTab = 'lesson'"
              >
                教案
              </div>
            </div>
          </div>

          <!-- 文件表格 - 根据activeTab显示不同的文件列表 -->
          <div class="file-table">
            <div class="table-header">
              <div class="header-item" style="width: 50px;"></div>
              <div class="header-item" style="flex: 3;">文件名</div>
              <div class="header-item" style="flex: 2;">更新时间</div>
              <div class="header-item" style="flex: 1.5;">文件大小</div>
              <div class="header-item" style="flex: 1.5;">操作</div>
            </div>

            <div class="table-row" v-for="file in activeImportFiles" :key="file.id">
              <div class="row-item" style="width: 50px;">
                <input type="checkbox" v-model="selectedImportFiles" :value="file.id">
              </div>
              <div class="row-item" style="flex: 3;">{{ file.name }}</div>
              <div class="row-item" style="flex: 2;">{{ file.date || '-' }}</div>
              <div class="row-item" style="flex: 1.5;">{{ file.size || '-' }}</div>
              <div class="row-item" style="flex: 1.5;">
                <button class="btn delete" @click="deleteImportFile(file.id)">删除</button>
              </div>
            </div>
          </div>

          <div class="modal-footer">
            <button class="btn secondary" @click="showModal = false">取消</button>
            <button class="btn primary" @click="importSelected">导入选中文件</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 新建教案弹窗 -->
    <div class="modal" v-if="showNewLessonModal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>新建教案</h2>
          <span class="close" @click="showNewLessonModal = false">&times;</span>
        </div>

        <div class="modal-body">
          <div class="form-group">
            <label for="lessonName">教案名称</label>
            <input type="text" id="lessonName" v-model="newLessonName" placeholder="请输入教案名称">
          </div>

          <div class="form-group">
            <label for="subject">科目</label>
            <select id="subject" v-model="newLessonSubject">
              <option value="语文">语文</option>
              <option value="数学">数学</option>
              <option value="英语">英语</option>
              <option value="物理">物理</option>
              <option value="化学">化学</option>
            </select>
          </div>

          <div class="form-group">
            <label for="grade">年级</label>
            <select id="grade" v-model="newLessonGrade">
              <option value="一年级">一年级</option>
              <option value="二年级">二年级</option>
              <option value="三年级">三年级</option>
              <option value="四年级">四年级</option>
              <option value="五年级">五年级</option>
              <option value="六年级">六年级</option>
            </select>
          </div>

          <div class="form-group">
            <label for="description">教案描述</label>
            <textarea id="description" v-model="newLessonDescription" placeholder="请输入教案描述"></textarea>
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn secondary" @click="showNewLessonModal = false">取消</button>
          <button class="btn primary" @click="saveNewLesson">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeMainTab: 'courseware', // 新增主列表活动选项卡状态
      // 主文件数据（分为课件和教案）
      coursewareFiles: [
        { id: 101, name: "公共/共享文件夹", date: "2025-06-17 09:20", size: "195KB", shared: false },
        { id: 102, name: "16金色的草地", date: "2025-06-16 11:20", size: "105KB", shared: false },
        { id: 103, name: "17美丽的花", date: "2025-06-15 14:45", size: "92KB", shared: false }
      ],
      lessonFiles: [
        { id: 201, name: "语文教案一", date: "2025-06-15 14:30", size: "120KB", shared: false },
        { id: 202, name: "数学教案二", date: "2025-06-14 10:15", size: "85KB", shared: false },
        { id: 203, name: "英语教案三", date: "2025-06-12 16:45", size: "105KB", shared: false }
      ],

      // 导入文件数据
      importCoursewareFiles: [
        { id: 301, name: "导入课件1.pptx", date: "2025-06-10 08:20", size: "45KB" },
        { id: 302, name: "导入课件2.pptx", date: "2025-06-11 09:30", size: "120KB" },
        { id: 303, name: "课件模板3.ppt", date: "2025-06-12 11:45", size: "65KB" }
      ],
      importLessonFiles: [
        { id: 401, name: "教案模板1.doc", date: "2025-06-13 14:20", size: "78KB" },
        { id: 402, name: "教案模板2.docx", date: "2025-06-14 16:50", size: "145KB" },
        { id: 403, name: "数学教案模板.doc", date: "2025-06-15 10:30", size: "95KB" }
      ],

      // 筛选相关
      searchQuery: '',
      sortBy: 'date-desc',
      sizeFilter: 'all',
      filteredCourseware: [],
      filteredLesson: [],

      // 选择相关
      selectedFiles: [],
      selectedImportFiles: [],

      // UI状态
      showModal: false,
      showNewLessonModal: false,
      activeTab: 'courseware', // 导入文档弹窗的当前选项卡

      // 新建教案相关
      newLessonName: '',
      newLessonSubject: '语文',
      newLessonGrade: '一年级',
      newLessonDescription: ''
    };
  },
  computed: {
    // 根据活动选项卡返回对应的导入文件列表
    activeImportFiles() {
      return this.activeTab === 'courseware'
        ? this.importCoursewareFiles
        : this.importLessonFiles;
    }
  },
  mounted() {
    // 初始化显示所有文件
    this.applyFilters();
  },
  methods: {
    // 应用筛选条件
    applyFilters() {
      // 筛选课件
      this.filteredCourseware = [...this.coursewareFiles];
      // 筛选教案
      this.filteredLesson = [...this.lessonFiles];

      // 按名称搜索
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        this.filteredCourseware = this.filteredCourseware.filter(file =>
          file.name.toLowerCase().includes(query)
        );
        this.filteredLesson = this.filteredLesson.filter(file =>
          file.name.toLowerCase().includes(query)
        );
      }

      // 按文件大小筛选
      if (this.sizeFilter !== 'all') {
        this.filteredCourseware = this.filteredCourseware.filter(file => {
          const size = this.parseFileSize(file.size);
          return this.sizeFilterCheck(size);
        });

        this.filteredLesson = this.filteredLesson.filter(file => {
          const size = this.parseFileSize(file.size);
          return this.sizeFilterCheck(size);
        });
      }

      // 排序
      this.sortFiles();
    },

    // 解析文件大小字符串为数值
    parseFileSize(sizeStr) {
      if (!sizeStr) return 0;
      const num = parseFloat(sizeStr);
      if (sizeStr.toLowerCase().includes('kb')) return num;
      if (sizeStr.toLowerCase().includes('mb')) return num * 1024;
      return num;
    },

    // 检查文件大小是否符合筛选条件
    sizeFilterCheck(size) {
      switch(this.sizeFilter) {
        case 'small': return size < 100;
        case 'medium': return size >= 100 && size <= 200;
        case 'large': return size > 200;
        default: return true;
      }
    },

    // 排序文件
    sortFiles() {
      const sortFunc = (a, b) => {
        const dateA = new Date(a.date.replace(' ', 'T'));
        const dateB = new Date(b.date.replace(' ', 'T'));

        if (this.sortBy === 'date-desc') {
          return dateB - dateA;
        } else {
          return dateA - dateB;
        }
      };

      this.filteredCourseware.sort(sortFunc);
      this.filteredLesson.sort(sortFunc);
    },

    // 删除单个文件
    deleteFile(id, type) {
      if (type === 'courseware') {
        this.coursewareFiles = this.coursewareFiles.filter(file => file.id !== id);
      } else {
        this.lessonFiles = this.lessonFiles.filter(file => file.id !== id);
      }
      this.applyFilters();
      this.selectedFiles = this.selectedFiles.filter(fileId => fileId !== id);
    },

    // 删除选中文件
    deleteSelected() {
      if (this.selectedFiles.length === 0) {
        alert('请先选择要删除的文件');
        return;
      }

      if (confirm(`确定要删除选中的 ${this.selectedFiles.length} 个文件吗？`)) {
        // 删除课件文件
        this.coursewareFiles = this.coursewareFiles.filter(
          file => !this.selectedFiles.includes(file.id)
        );

        // 删除教案文件
        this.lessonFiles = this.lessonFiles.filter(
          file => !this.selectedFiles.includes(file.id)
        );

        this.selectedFiles = [];
        this.applyFilters();
      }
    },

    // 切换共享状态
    toggleShare(file) {
      file.shared = !file.shared;
    },

    // 新建教案
    createNewLesson() {
      this.showNewLessonModal = true;
      // 重置表单
      this.newLessonName = '';
      this.newLessonSubject = '语文';
      this.newLessonGrade = '一年级';
      this.newLessonDescription = '';
    },

    // 保存新建的教案
    saveNewLesson() {
      if (!this.newLessonName.trim()) {
        alert('请输入教案名称');
        return;
      }

      const newId = Math.max(...this.lessonFiles.map(f => f.id), 0) + 1;

      this.lessonFiles.push({
        id: newId,
        name: this.newLessonName,
        subject: this.newLessonSubject,
        grade: this.newLessonGrade,
        date: this.getCurrentDateTime(),
        size: "0KB",
        shared: false
      });

      this.showNewLessonModal = false;
      this.applyFilters();
      alert('教案创建成功！');
    },

    // 获取当前日期时间
    getCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },

    // 删除可导入文件
    deleteImportFile(id) {
      if (this.activeTab === 'courseware') {
        this.importCoursewareFiles = this.importCoursewareFiles.filter(file => file.id !== id);
      } else {
        this.importLessonFiles = this.importLessonFiles.filter(file => file.id !== id);
      }
      this.selectedImportFiles = this.selectedImportFiles.filter(fileId => fileId !== id);
    },

    // 导入选中文件
    importSelected() {
      if (this.selectedImportFiles.length === 0) {
        alert('请选择要导入的文件');
        return;
      }

      const filesToImport = this.activeImportFiles.filter(file =>
        this.selectedImportFiles.includes(file.id)
      );

      filesToImport.forEach(file => {
        const newId = this.activeTab === 'courseware'
          ? Math.max(...this.coursewareFiles.map(f => f.id), 0) + 1
          : Math.max(...this.lessonFiles.map(f => f.id), 0) + 1;

        const newFile = {
          id: newId,
          name: file.name,
          date: this.getCurrentDateTime(),
          size: file.size || '100KB',
          shared: false
        };

        if (this.activeTab === 'courseware') {
          this.coursewareFiles.push(newFile);
        } else {
          this.lessonFiles.push(newFile);
        }
      });

      // 更新UI
      this.applyFilters();
      this.showModal = false;
      this.selectedImportFiles = [];
      alert(`成功导入 ${filesToImport.length} 个文件`);
    }
  }
};
</script>

<style scoped>
/* 基础样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Microsoft YaHei', sans-serif;
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.6;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 顶部操作栏 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  margin-bottom: 20px;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.left-section, .right-section {
  display: flex;
  gap: 15px;
}

/* 按钮样式 */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn.primary {
  background: #409EFF;
  color: white;
}

.btn.primary:hover {
  background: #66b1ff;
}

.btn.secondary {
  background: #F56C6C;
  color: white;
}

.btn.secondary:hover {
  background: #f78989;
}

.btn.query {
  background: #67C23A;
  color: white;
}

.btn.query:hover {
  background: #85ce61;
}

.btn.share {
  background: #909399;
  color: white;
  padding: 6px 12px;
  margin-right: 8px;
}

.btn.share:hover {
  background: #a6a9ad;
}

.btn.delete {
  background: #F56C6C;
  color: white;
  padding: 6px 12px;
}

.btn.delete:hover {
  background: #f78989;
}

/* 区域样式 */
.section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-item span {
  color: #606266;
  font-size: 14px;
}

input, select {
  padding: 8px 12px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  outline: none;
  font-size: 14px;
}

/* 文件表格样式 */
.file-table {
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 10px;
}

.table-header {
  display: flex;
  padding: 12px 15px;
  background: #F5F7FA;
  font-weight: 600;
  border-bottom: 1px solid #EBEEF5;
}

.table-row {
  display: flex;
  padding: 12px 15px;
  border-bottom: 1px solid #EBEEF5;
  align-items: center;
  transition: background-color 0.2s;
}

.table-row:hover {
  background-color: #f9f9f9;
}

.table-row:last-child {
  border-bottom: none;
}

.header-item, .row-item {
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.row-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* 统计区域 */
.stats {
  background: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  color: #606266;
  text-align: right;
  margin-top: 10px;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  width: 800px;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #EBEEF5;
}

.modal-header h2 {
  color: #333;
  font-size: 20px;
  font-weight: bold;
}

.close {
  font-size: 24px;
  cursor: pointer;
  color: #909399;
  font-weight: bold;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
  max-height: 60vh;
}

/* 导入区域 */
.import-section {
  margin-bottom: 20px;
}

.import-section h3 {
  margin-bottom: 15px;
  color: #409EFF;
  font-size: 16px;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #EBEEF5;
  margin-bottom: 15px;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  border-bottom: 2px solid transparent;
}

.tab.active {
  color: #409EFF;
  border-bottom: 2px solid #409EFF;
  font-weight: 500;
}

/* 弹窗底部 */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 20px;
  border-top: 1px solid #EBEEF5;
}

/* 新建教案表单 */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #606266;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  font-size: 14px;
}

.form-group textarea {
  height: 100px;
  resize: vertical;
}

/* 表格标题 */
.file-table-title {
  font-size: 18px;
  font-weight: 600;
  color: #409EFF;
  margin: 10px 0 5px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #409EFF;
  display: inline-block;
}
</style>
